<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
  <title>记忆课堂</title>
  <link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <style>
    #app {
      margin-top: 30px;
    }
    .adminLoginBox {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .mb-15 {
      margin-bottom: 20px;
    }
    .mt-15 {
      margin-top: 15px;
    }
    small {
      color: orange;
    }
   
  </style>
</head>
<body>
  
  <div id="app" class="clearfix container col-md-8 col-xs-12 col-md-offset-2"> 
    <div class="col-md-12">
      <h3 class="text-center">User Admin</h3>
      <p class="text-center">
        <span class="text-muted">The best preparation for tomorrow is doing your best today.</span>
        <small>对明天做好的准备就是今天做到最好！</small>
      </p> 
    </div>

    <ul class="list list-group col-md-2">
      <li class="list-group-item" @click="tabIndex = 0" :class="{'active': tabIndex == 0}">
        用户管理
      </li>
      <li class="list-group-item" @click="tabIndex = 1" :class="{'active': tabIndex == 1}" >
        管理员管理
      </li>
    </ul>

    <div class="col-md-10">
      <div v-show="tabIndex == 0">
        <user-box-component></user-box-component>
      </div>
      
      <div v-show="tabIndex == 1">
        <admin-manage-component></admin-manage-component>
      </div>
    </div>
  
  </div>


  <template id="userDetail">
    <div class="user-detail">
      
    </div>
  </template>
  
  <template id="userBox">
    <div class="user-box">
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>用户名</th>
            <th>身份</th>
            <th>绑定邮箱</th>
            <th>注册时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(user, index) in list">
            <td>{{user.name}}</td>
            <td>{{identityTab[user.identity]}}</td>
            <td>{{user.email}}</td>
            <td>{{user.createdAt | date}}</td>
            <td>
              <button class="btn btn-default" @click="editUser(user, index)">
                <span class="glyphicon glyphicon-edit"></span>
              </button>
              <button class="btn btn-default" @click="delUser(user, index)">
                <span class=" glyphicon glyphicon-trash"></span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="handler-box">
        <button class="btn btn-default" v-show="page > 1">上一页</button>
        <button class="btn btn-default" v-show="list.length == 10">下一页</button>
      </div>
    </div>
  </template>

  <template id="adminerList">
    <div class="adminer-list">
      <h3 class="text-center" v-show="!list.length">无管理员</h3>
      <table class="table table-bordered" v-show="list.length">
        <thead>
          <tr>
            <th>管理员</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="admin in list">
            <td>{{admin.name}}</td>
            <td>
              <button class="btn btn-default">
                取消管理职位<span class=" glyphicon glyphicon-ban-circle"></span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>

  <template id="applyList">
    <div class="apply-list">
      <h3 class="text-center" v-show="!list.length">无申请</h3>
      <table class="table table-bordered" v-show="list.length">
        <thead>
          <tr>
            <th>申请人</th>
            <th>申请理由</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in list">
            <td>{{item.handler.name}}</td>
            <td>{{item.introduction}} </td>
            <td>
              
              <div v-show="!item.status">
                <button class="btn btn-default" title="不通过" @click="handlerApply(item, 0)">
                  <span class=" glyphicon glyphicon-ban-circle"></span>
                </button>
                <button class="btn btn-default" title="通过" @click="handlerApply(item, 1)">
                  <span class=" glyphicon glyphicon-ok-circle"></span>
                </button>
              </div>
              <span v-show="item.status">
                <span class="text-success" v-show="item.access">已通过</span>
                <span class="text-warning" v-show="!item.access">未通过</span>
              </span>
              
              
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>

  <template id="adminManage">
    <div class="admin-manage">
      <ul class="nav nav-tabs">
        <li :class="{'active': tabIndex == 0}" @click="tabIndex = 0"><a href="javascript:void(0)">管理员列表</a></li>
        <li :class="{'active': tabIndex == 1}" @click="tabIndex = 1"><a href="javascript:void(0)">申请记录</a></li>
      </ul>
      <div class="row mt-15">
        <div class="col-md-12" v-show="tabIndex == 0" >
          <adminer-component></adminer-component>
        </div>
        <div class="col-md-12" v-show="tabIndex == 1">
          <apply-component></apply-component>
        </div>
      </div>
      
    </div>
  </template>




  <script type="text/javascript" src="/lib/vue/vue.min.js"></script>
  <script src="/lib/vue/vue-resource.min.js"></script>
  <script src="/scripts/assets/filter.js"></script>
  <script src="/scripts/assets/util.js"></script>
  <script src="/scripts/admin/userAdmin.js"></script>
  <script>

    new Vue({
      el: '#app',
      data: {
          tabIndex: 0

      },
      mounted: function() {


      },
      methods: {

      },
      components: {
          'user-box-component': userBoxComponent,
          'admin-manage-component': adminManageComponent
      }
  })

  </script>
</body>
</html>